Установка скрипта «Предпросмотр товаров»
Введение
Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.Этот скрипт позволяет организовать быстрый просмотр товаров без перехода на страницу товара. С помощью этого дополнения вы можете улучшить пользовательский интерфейс и повысить юзабилити вашего интернет-магазина.
В блоке с товаром возможна как размещение кнопки "Быстрый просмотр", так и расположение при клике на изображение товара. При нажатии на эту ссылку\изображение, появляется всплывающее окно, в котором выводится детальная информация о товаре.
В комплект скрипта входит (только на странице предпросмотра) два дополнительных скрипта, это кнопки плюс/минус (+/-) для количества товаров и изменение внешнего вида опций для товаров.
Перед установкой, сделайте полный бэкап шаблонов на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в Панели управления » Управление дизайном » Backup шаблонов.
Первый шаг: загрузка скрипта на сайт
Перейдите в Панель управления » Файловый менеджер.
Второй шаг: установка кода
Перейдите в Панель управления » Управление дизайном » Интернет-магазин: Страница товара, перед тегами </body></html> разместите код:
<?if(strpos($REQUEST_URI$,"comment")!= -1)?>
<div class="comment-prev">
<?if($COM_IS_ACTIVE$)?>
<?if($COM_CAN_READ$)?>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="60%" height="25">Всего комментариев: <b>$COM_NUM_ENTRIES$</b></td><td align="right" height="25">$COM_PAGE_SELECTOR$</td></tr>
<tr><td colspan="2">$COM_BODY$</td></tr>
<tr><td colspan="2" align="center">$COM_PAGE_SELECTOR1$</td></tr>
<tr><td colspan="2" height="10"></td></tr>
</table>
<?endif?>
<?if($COM_CAN_ADD$)?>
$COM_ADD_FORM$
<?else?>
<?if($USER_LOGGED_IN$)?><?else?><div align="center" class="commReg">Добавлять комментарии могут только зарегистрированные пользователи.<br />[ <a href="$REGISTER_LINK$">Регистрация</a> | <a href="$LOGIN_LINK$">Вход</a> ]</div><?endif?>
<?endif?>
<?endif?>
</div>
<?endif?>
<?if(strpos($REQUEST_URI$,"goodspreview")!= -1)?>
<div style="display:none">
<div class="addonimg">
<ul class="thumbnails">
<li><a class="ulightbox thumbnail" id="photohref" href="$PHOTO$"><img title="Кликните для увеличения изображения" src="$PHOTO$" id="ipreview" style="width:319px;cursor:pointer;margin-bottom:20px;" /></a></li>
<?if($PHOTO_1$)?><li class="image-additional"><img src="$PHOTO_1$" class="gphoto" onclick="var el=getElementById('ipreview'), el2=getElementById('photohref'); el.src='$PHOTO_1$'; el.setAttribute('idx',0); el2.setAttribute('href','$PHOTO_1$');"></li><?endif?>
<?if($PHOTO_2$)?><li class="image-additional"><img src="$PHOTO_2$" class="gphoto" onclick="var el=getElementById('ipreview'), el2=getElementById('photohref'); el.src='$PHOTO_2$'; el.setAttribute('idx',1); el2.setAttribute('href','$PHOTO_2$');"></li><?endif?>
<?if($PHOTO_3$)?><li class="image-additional"><img src="$PHOTO_3$" class="gphoto" onclick="var el=getElementById('ipreview'), el2=getElementById('photohref'); el.src='$PHOTO_3$'; el.setAttribute('idx',2); el2.setAttribute('href','$PHOTO_3$');"></li><?endif?>
<?if($PHOTO_4$)?><li class="image-additional"><img src="$PHOTO_4$" class="gphoto" onclick="var el=getElementById('ipreview'), el2=getElementById('photohref'); el.src='$PHOTO_4$'; el.setAttribute('idx',3); el2.setAttribute('href','$PHOTO_4$');"></li><?endif?>
<?if($PHOTO_5$)?><li class="image-additional"><img src="$PHOTO_5$" class="gphoto" onclick="var el=getElementById('ipreview'), el2=getElementById('photohref'); el.src='$PHOTO_5$'; el.setAttribute('idx',4); el2.setAttribute('href','$PHOTO_5$');"></li><?endif?>
</ul>
</div>
</div>
<?endif?>
после чего сохраните изменения. Далее перейдите в Панель управления » Управление дизайном » Интернет-магазин: Вид товара в каталоге, в самом низу разместите код:
<div class="popup" id="popup$BLOCK_PREF$$ID$">
<div class="inner_popup">
<div class="modal-header">
<button type="button" class="closed" data-item="$BLOCK_PREF$$ID$"><span>×</span></button>
<h4 class="modal-title" id="quick_view_product_modalLabel">$NAME$</h4>
</div>
<div class="popup-left">
<div class="addphotos"></div>
<div class="description_block">
<ul class="nav nav-tabs"><li class="active"><a href="#tab-description" data-item="$BLOCK_PREF$$ID$">Описание</a></li><li><a href="#tab-review" data-item="$BLOCK_PREF$$ID$" id="tab-review-a$BLOCK_PREF$$ID$" data-url="$ENTRY_URL$">Отзывы ($COM_NUM_ENTRIES$)</a></li></ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-description$BLOCK_PREF$$ID$">$BRIEF$</div>
<div class="tab-pane" id="tab-review$BLOCK_PREF$$ID$"></div>
</div>
</div>
</div>
<div class="popup-right">
<div class="shop-block">$2WISHLIST$ $2BASKET$</div>
<ul class="list-unstyled">
<?if($BRAND$)?><li>Производитель: <span>$BRAND$</span></li><?endif?>
<?if($STOCK$)?><li>В наличии: <span>$STOCK$</span></li><?endif?>
<?if($ART_NO$)?><li>Артикул: <span>$ART_NO$</span></li><?endif?>
<?if($WARR$)?><li>Гарантия: <span>$WARR$</span></li><?endif?>
<?if($WEIGHT$)?><li>Вес: <span>$WEIGHT$</span></li><?endif?>
<?if($CAT_NAME$)?><li>Категории: <span>$ENTRY_CATS$</span></li><?endif?>
<?if($TAGS$)?><li>Теги: <span>$TAGS$</span><?endif?>
</ul>
<ul class="list-unstyled">
<li>
<?if($PRICE_OLD$)?><h2>$PRICE$</h2> <s>$PRICE_OLD$</s><?else?><h2>$PRICE$</h2><?endif?>
</li>
</ul>
<?if($OPTIONS$)?>$OPTIONS$<?endif?>
<div class="value-numb">
<input type="text" id="q$BLOCK_PREF$-$ID$-basket" value="1" min="1" step="1" class="form-control" size="3" onfocus="this.select()" onkeypress="return checkNumber(this, event, '1');"><a href="#" class="tic-tac plus" data-incval="1">+</a><a href="#" class="tic-tac minus" data-incval="-1">-</a>
</div>
<button type="button" class="goodsbutton" id="b$BLOCK_PREF$-$ID$-basket" onclick="add2Basket('$ID$','$BLOCK_PREF$');">Добавить в корзину</button>
<div class="rating">
<?if($RATING$)?><?$RSTARS$('20','/.s/img/stars/10/20.png','1','float')?><?endif?> <span><a href="#" onclick="$('#tab-review-a$BLOCK_PREF$$ID$').trigger('click');return false;">$COM_NUM_ENTRIES$ отзы<?if($COM_NUM_ENTRIES$%10=0||$COM_NUM_ENTRIES$%10>4||$COM_NUM_ENTRIES$%100>10&&$COM_NUM_ENTRIES$%100<15)?>ва<?else?><?if($COM_NUM_ENTRIES$%10=1)?>в<?else?>ва<?endif?><?endif?></a> / <a href="#" onclick="$('#tab-review-a$BLOCK_PREF$$ID$').trigger('click');return false;">Написать отзыв</a></span>
<hr>
</div>
</div>
</div>
</div>
Затем, в шаблонах "Главная страница магазина", "Каталог товаров" и "Страница товара" перед тегами </body></html> разместите код:
<script type="text/javascript" src="/js/goodspreview.js"></script>и сохраните изменения.
Теперь нам нужно определиться с тем, при нажатии на что мы будем открывать окно предпросмотра товара. Всего есть два варианта.
Первый вариант:
<div class="image">
<img src="$THUMB$" alt="" title="$NAME$" class="gphoto">
<a href="$ENTRY_URL$" class="fast_look" data-item="$BLOCK_PREF$$ID$"></a>
</div>
затем перейдите в Панель управления » Управление дизайном » Интернет-магазин: Таблица стилей (CSS), в самый низ разместите следующий код:
.image {
position:relative;
max-width:100%;
height:auto;
}
.image a {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTA5MTFCMjA2NThGMTFFNDgzMDlGMzY5M0Q1OEY0Q0MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTA5MTFCMjE2NThGMTFFNDgzMDlGMzY5M0Q1OEY0Q0MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MDkxMUIxRTY1OEYxMUU0ODMwOUYzNjkzRDU4RjRDQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MDkxMUIxRjY1OEYxMUU0ODMwOUYzNjkzRDU4RjRDQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Plp5VQ0AAAQcSURBVHjazJpdSBVBFMfXxfJGhmbYvWho4kPkZ58IFRG3jxcpLbK3oJcehIp6iUAiqpeQ6K3C8sGghyToqg8FWj1IgXpNER8kI6NQ08yvUlRKb/+pc2MYdu/O7O79OPCDO7szO/vfObMz5+xNCoVCmk0rAUUgi9gAJsAo0QcGtChbsmL9PaAKVIA8ifqDIAAaQW9UFLARkGA7aA05s2dgq2R/0iRZuFAquAtOgySD88tgHIyA7yATZAMv0E3qPwCXwFK0RyAX9Bk8yQnwEBwFa0zapoIToAFMG1yjA/jcGAGzE2Xgm9DpPLgJ1il2sh7cBovC9YZBcTQE5BrcPHtimxx2lm8wop/BRjcFpBp08hh4XJp07PoB4frtYJVbAh4Z3LzmMjpoEfqpdUMAe1WuCG4j8+TLqW6Y/RJt2Dzq5/paAnlOBbQKE1bW588IT7NSst0W8Itr98SOAJ1bYQ9zb9c7YDjKu4D3oJ4rnwKFqhcJC6jijrEFqVaLjV0Hi/SbLZQn7Qqo4I41gZ8xEjAGWrlypR0BJcLGrEWLrQW439tAjqqAImGv8jLGAl4I5QLV7XQWV2YbswWDeuW0UTOyfULZD9JN6n4Br4Vj4zQPPFT2OREwYlLvKiiTvOb5COeaDQSE58JmOwJ0iqT4N1A8bJr7vV5VwARXzoyTAP4hTqm60ChXzjapdxlkmJzzC25zC3Sa1P1qctwruJNtAV6KwuaEeu0RriFO2E5aS2SNzcEUuwJ0yh7w5SMxdp9yPkAE/aoCBih7ELZjMRZwnPsdFDxCeivBr4YVqm8CB8ZW3YMmq7KSgEbBp2tiJOAGWM3tAp7aFdArqD8H8qN886WUrglbA/joJK3Ckk6/uQCjj2JYq6DCD5o4yiTaZIAPQgCV5UZMfE+IrgIUw7oZEyeDV0I/19wK6lMoruWtxUYuKNKTF29+0MlDMjroo6QTb/0Uwzq5+VLBbXiroToeVTFmJ4op6cQbC8Dv20gJ5lCKcdki+TtEc3AO1IE0JwI0ypi1G3S0AJopG+E1acsm5FnwnFImIQO3sbJ3lJa0LUCjjFmtyU3wgj6BHhq1xQh152nC6uQ2jkXIukEe5W1WbH4bYK5Rb/CqHJJo2w3SnQoIU0hPsFeiYya2E1yhxK54LY+w7kSyoJkIqw8cVvuYAgoBfbR/mqLt8BjtKkctdgE/wFrJ/rop+TZj5xNTtKhTdMUu8e3kZATcsDQK8ncotAnSSMxqJt+xYmnsJg6BHoU2uymbl/Y3HxnnEeAzEW1gp0Kbt+BAoggIxyFMxC6FNhd0LXFshny7W6GNP5EE8CKCkvUnE8mFxLdTG01YM1sBe3UtMW2WRqIrQp2LoCPeC5kVbNF6Y7Cvqk6UhUw2e1hNKcxJ7d9/Lf6PzB8BBgCxazOgCuh1igAAAABJRU5ErkJggg==") 50% 50% no-repeat rgba(0, 0, 0, 0.298);
display: block;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 10;
-webkit-transition: all 0.3s ease;transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;
}
.image a:hover {
opacity: 1;
}
Второй вариант (в виде простой ссылки):
<a href="$ENTRY_URL$" class="fast_look" data-item="$BLOCK_PREF$$ID$">Быстрый просмотр товара</a>
Третий шаг: установка стилей для окна
Перейдите в Панель управления » Управление дизайном » Интернет-магазин: Таблица стилей (CSS), в самый низ разместите следующий код:
.popup{
display:none;
max-width: 100%;
background: rgba(0,0,0,0.3);
position:fixed;
z-index:999;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup .tabs_block {
position:relative;
}
.popup .tabs_block:before {
content: "";
width: 1px;
height: 1500%;
left: 0;
background: #e1e1e1;
top: 65px;
position: absolute;
}
.popup .content_box {
overflow:hidden;
}
.inner_popup{
width: 1000px;
height: 80%;
overflow-y: scroll;
background: white;
position: absolute;
left: 50%;
top: 10%;
padding: 20px 20px 0 20px;
margin-left: -500px;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.modal-header {
position: fixed;
width: 970px;
height: 50px;
margin-top: -20px;
background: #fff;
z-index: 9999;
border-bottom: 1px solid #e5e5e5;
font-size:17pt;
padding-left:10px;
padding-bottom:15px;
}
.modal-title {
margin: 0;
line-height: 3;
}
.closed {
float: right;
font-size: 25px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
margin-top:2px;
}
button.closed {
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: 0 0;
border: 0;
line-height: 2.7;
}
.closed:focus,.closed:hover {
color:#000;
text-decoration:none;
cursor:pointer;
filter:alpha(opacity=50);
opacity:.5;
}
.popup-left{
float:left;
width:63%;
padding-top:70px;
}
.thumbnails {
overflow: auto;
clear: both;
list-style: none;
padding: 0;
margin: 0;
}
.thumbnails > li {
margin-left: 20px;
}
.thumbnail {
display: block;
padding: 20px 10px 0px 10px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
.thumbnail>img {
display: block;
max-width: 100%;
height: auto;
margin-right: auto;
margin-left: auto;
}
.image-additional {
padding: 9px 5px 0 5px;
display: block;
border: 1px solid #ddd;
float:left;
border-radius:3px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
.image-additional .gphoto {
max-width: 78px;
}
a.thumbnail:hover, .image-additional:hover {
border-bottom-color: #337AB7;
border-left-color: #337AB7;
border-right-color: #337AB7;
border-top-color: #337AB7;
}
.nav-tabs {
margin-bottom: 15px;
margin-top: 25px;
border-bottom: 1px solid #ddd;
}
.nav-tabs>li {
float: left;
margin-bottom: -1px;
}
.nav>li {
position: relative;
display: block;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
text-decoration: none;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-tabs>li>a:hover {
border-color:#eee #eee #ddd
}
.nav:after,.nav:before {
display:table;
content:" ";
}
.nav:after {
clear:both
}
.tab-content{
margin-top:15px;
font-weight: 400;
color: #666;
font-size: 12px;
line-height: 20px;
min-height:100px;
}
.popup-right {
width: 33.33%;
float: right;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
padding-top: 70px
}
.list-unstyled {
padding-left: 0;
list-style: none;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
color: #666;
font-size: 12px;
line-height: 20px;
}
.list-unstyled li a {
text-transform: lowercase;
}
.list-unstyled h2 {
color:#000;
font-size: 27px;
margin-top: 20px;
margin-bottom: 10px;
display:inline-block;
margin-right:10px;
}
.shop-block div {
display:inline-block;
}
.shop-block .basket {
margin-bottom:10px;
margin-left:10px;
}
.rating ul {
display:inline-block;
margin-top:5px;
}
.rating hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}
.form-control{
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: none;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color:#66afe9;
outline:0;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
.goodsbutton {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
border-color: #1f90bb #1f90bb #145e7a;
padding: 10px 16px;
font-size: 22px;
border: 1px solid #cccccc;
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
width: 100%;
line-height: 1.3333333;
border-radius: 6px;
cursor:pointer;
}
.goodsbutton:hover{
background-color: #1f90bb;
background-position: 0 -15px;
}
.shop-options .opt {
display:block;
margin-top:7px;
}
.shop-options-li {
display: block;
margin: 0 0 15px 3px;
}
.shop-options-li .option-link {
height: 30px;
line-height: 30px;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid #ccc;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
display: inline-block;
padding: 1px 10px;
color: #333;
background-color: #fff;
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
margin-top:5px;
border-radius:5px;
}
.shop-options-li a:hover {
background-color: #ebebeb;
border-color: #adadad;
}
.shop-options-li .active {
background-color: #ebebeb;
border-color: #adadad;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.value-numb{
margin-bottom:10px;
overflow: hidden;
position: relative;
border: 1px solid #ccc;
border-radius: 5px;
font-size:0;
display:block;
}
.value-numb .minus, .value-numb .plus{
position: absolute;
bottom: 0;
right: 0;
background: #fff;
color: #777;
border: none;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
width: 19px;
box-sizing: border-box;
-moz-box-sizing: border-box;
text-decoration: none;
}
.value-numb .plus{
padding: 7px 5px 11px 3px;
line-height: 29px;
font-size: 14px;
}
.value-numb .minus{
padding: 0 6px 0 5px;
line-height: 15px;
font-size: 15px;
}
.plus:hover, .minus:hover{
background: #888;
color:#fff;
}
.btn-group, .btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.rating {
padding-top:20px;
}
.rating span{
position:relative;
bottom:5px;
left:5px;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
div[id*='tab-reviewall'] {
min-height:250px;
}
- Информация о классах:
-
popup– задний фон -
inner_popup– блок предпросмотра; -
modal-header– верхняя часть (заголовок и кнопка закрыть); -
modal-title– заголовок товара -
closed– кнопка "закрыть" -
popup-left– левый блок -
thumbnails– блок с изображениями товара; -
thumbnail– основное изображение -
image-additional– дополнительные изображения -
nav nav-tabs– переключатели "описание" и "отзывы"; -
tab-content– блок с контентом (описание, отзывы); -
popup-right– правая часть блока -
list-unstyled– блок с информацией о товаре (производитель, наличиеи и т.д.) -
list-unstyled li a– обращение к ссылкам в блоке с информацией -
shop-block div– обращение к кнопкам "добавить в список желаний" и "в корзину" -
rating ul– обращение к рейтингу -
form-control– поле кол-ва товаров -
goodsbutton– кнопка "добавить в корзину" -
shop-options– опции товара -
shop-options-li option-link– блок с опциями -
shop-options-li– обращение к пунктам опций товара
Установка завершена. Если у вас возникли вопросы, которые не затрагивались в документации, спрашивайте в комментариях к товару.